<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .select {
        width: 600px;
        margin: 30px auto;
        overflow: hidden;
      }
      #sel1,
      #sel2 {
        width: 200px;
        /* height: 400px; */
        background-color: #eee;
        box-shadow: 2px 2px 5px #ccc;
        float: left;
        font: 30px 微软雅黑;
        padding: 5px;
        box-sizing: border-box;
      }
      .btn {
        float: left;
        margin-top: 100px;
      }
      .btn button {
        width: 50px;
        height: 30px;
        margin: 5px;
        display: block;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="select">
      <select name="" id="sel1" multiple size="10">
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="橘子">橘子</option>
        <option value="鸭梨">鸭梨</option>
      </select>
      <div class="btn">
        <button>&gt;</button>
        <button>&gt;&gt;</button>
        <button>&lt;</button>
        <button>&lt;&lt;</button>
      </div>
      <select name="" id="sel2" multiple size="10"></select>
    </div>
  </body>
  <script>
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var btn = document.getElementsByTagName("button");
    // 将左边选中的内容添加到右侧
    /*   btn[0].onclick=function(){
        var opts = sel1.children;
        // console.log(opts);
        for(var i = 0 ;i < opts.length;i++){
            if(opts[i].selected){
                sel2.appendChild(opts[i])
            }
        }
    } */
    btn[0].onclick = function () {
      add(sel1, sel2);
    };

    // 将右边选中的内容添加到左侧
    /*  btn[2].onclick=function(){
        var opts = sel2.children;
        // console.log(opts);
        for(var i = 0 ;i < opts.length;i++){
            if(opts[i].selected){
                sel1.appendChild(opts[i])
            }
        }
    } */
    btn[2].onclick = function () {
      add(sel2, sel1);
    };

    //左右添加代码重复，将其封装为一个函数
    function add(sel1, sel2) {
      var opts = sel1.children;
      for (var i = 0; i < opts.length; i++) {
        if (opts[i].selected) {
          sel2.appendChild(opts[i]);
          i--;
          // 每次添加后数组下标会发生改变，若不进行减一操作会下标越界，导致一些元素无法被遍历
        }
      }
    }

    // 将左侧内容全部移动到右侧
    btn[1].onclick = function () {
      addAll(sel1, sel2);
    };
    // 将右侧内容全部移动到左侧
    btn[3].onclick = function () {
      addAll(sel2, sel1);
    };

    //全部添加封装函数
    function addAll(sel1, sel2) {
      var opts = sel1.children;
      for (var i = 0; i < opts.length; i++) {
        sel2.appendChild(opts[i]);
        i--;
        // 每次添加后数组下标会发生改变，若不进行减一操作会下标越界，导致一些元素无法被遍历
      }
    }
  </script>
</html>
